<template>
	<zui-watermark content="东莞宏悦酒业" :opacity="0.08" :overlay="0.5"  ></zui-watermark>
	<view class="ad-img-view" :style="{
		backgroundImage: 'url(' + img + ')'
	}" @click="Show" />
	
	<block v-if="auth">
		<up-upload
			@afterRead="AfterRead"
			:maxCount="1"
			capture="album"
		>
			<view class="upl-text">换一张</view>
		</up-upload>
	</block>
	
	<view style="text-align: center;font-size: 12px;color: #999;">扫码进群，获取更多优惠</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import Store from '@/Store/index.js'
	import ConfigApi from '@/Api/Config.js'

	const img = ref('')
	const auth = ref(false)

	const ChatImg = () => {
		ConfigApi.ChatImg().then(resp => {
			img.value = resp.data
		})
		if(Store.getters.userId == 110 || Store.getters.userId == 104 || Store.getters.userId == 107){
			auth.value = true
		}
	}

	const Show = () => {
		// 图片预览
		uni.previewImage({
			urls: [img.value],
		})
	}

	const AfterRead = ({
		file
	}) => {
		const url = file.url
		uni.uploadFile({
			url: 'https://admin.yaojunzhiku.com/prod-api/common/uploadOSS',
			filePath: url,
			name: 'file',
			header: {
				'content-type': 'multipart/form-data',
			},
			success: (resp) => {
				console.log(resp)
				img.value = JSON.parse(resp.data).url
				// 更新
				ConfigApi.UpdateImg(img.value)
			},
		})
	}

	ChatImg()
</script>

<style lang="scss" scoped>
	.ad-img-view {
		width: 96vw;
		height: 500px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		margin: 50px auto;
	}

	.upl-text {
		width: 100vw;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 12px;
		font-weight: 500;
		color: #165dff;
		text-decoration: underline;
		margin-bottom: 20px;
	}
</style>